{extend name="layout"}
{block name="diy_head"}
<style>

    .mask-black {
        background-color: rgba(0, 0, 0, 0.6);
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        top: 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        z-index:999;
    }

    .m-actionsheet {
        text-align: center;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        background-color: #ffffff;
        -webkit-transform: translate(0, 100%);
        transform: translate(0, 100%);
        -webkit-transition: -webkit-transform .3s;
        transition: -webkit-transform .3s;
        transition: transform .3s;
        transition: transform .3s, -webkit-transform .3s;
    }
    .actionsheet-toggle {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    .actionsheet-item {
        display: block;
        position: relative;
        font-size: 0.8rem;
        color: #555;
        height: 2rem;
        line-height: 2rem;
        background-color: #FFF;
    }
    .actionsheet-item:after {
        content: '';
        position: absolute;
        z-index: 2;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        border-bottom: 1px solid #D9D9D9;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
    }
    .actionsheet-action {
        display: block;
        margin-top: .15rem;
        font-size: 0.8rem;
        color: #555;
        height:3rem;
        line-height: 3rem;
        position:absolute;
        top:10px;
        right:0;
    }
    .gg{
        padding: 3px 8px;margin:5px;border:1px solid #f00;background:#fff;color:#f00;
    }
    .ggactive{
        padding: 3px 8px;margin:5px;border:1px solid #f00;background:#f00;color:#fff;
    }
</style>
{/block}

{block name="detail"}
<div class="aui-banner-content">
    <div class="aui-banner-wrapper">
        <div class="aui-banner-wrapper-item">
            <a href="#">
                <img src="{$product.img}" width="100%">
            </a>
        </div>
    </div>
</div>
<div class="aui-product-content">
    <div class="aui-real-price clearfix">
        <span id="showPrice">
            <i>￥</i>{$guige[0]['salePrice']}
        </span>
    </div>

    <div class="aui-product-title">
        <h2>{$product.title}</h2>
        <p></p>
    </div>

    <div class="aui-product-coupon">
        <a href="#" class="aui-address-cell aui-fl-arrow aui-fl-arrow-clear" data-ydui-actionsheet="{target:'#actionSheet',closeElement:'#cancel'}">
            <div class="aui-address-cell-bd">选择</div>
            <div class="aui-address-cell-ft" id="sgg"></div>
        </a>
        <div class="m-actionsheet" id="actionSheet">
            <div style="position:relative">
                <a href="javascript:;" class="actionsheet-action" id="cancel" style="top: 0px;right:10px;">关闭</a>
                <div style="height:200px;position: relative;width:  100%;left:  0px;top: 40px;">
                    <div style="padding-left:20px;padding-right:20px;text-align:left;">
                        <div>选择规格：</div>
                        <div>&nbsp;</div>
                        <div id="ggs">
                            {volist name="guige" id="gg"}
                            {if condition="$key eq 0"}
                            <a href="javascript:;"  class="ggactive" onclick="ggselect('{$gg.salePrice}','{$gg.id}','{$key}')">{$gg.guige} </a>
                            {else}
                            <a href="javascript:;"  class="gg" onclick="ggselect('{$gg.salePrice}','{$gg.id}','{$key}')">{$gg.guige} </a>
                            {/if}
                            {/volist}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="aui-dri"></div>
    <div class="aui-product-evaluate">
        <a href="{:url('index/shop/comment',['sid'=>$shop['info']['id'],'pid'=>$product.id])}" class="aui-address-cell aui-fl-arrow-clear">
            <div class="aui-address-cell-bd">商品评价   <em>({$commentCount})</em></div>
            <div class="aui-address-cell-ft">
                <span>好评 {$rate}%</span>
            </div>
        </a>
    </div>
    <div class="aui-dri"></div>
    <div class="aui-product-evaluate">
        <a href="{:url('index/shop/index',['id'=>$shop['info']['id']])}" class="aui-address-cell aui-fl-arrow-clear">
            <div class="aui-address-cell-bd">
                <div class="clearfix">
                    <div class="aui-product-shop-img">
                        <img src="{$shop['info']['img']}" alt="">
                    </div>
                    <div class="aui-product-shop-text">
                        <h3>{$shop['info']['name']}</h3>
                        <p>精选商家  服务保障</p>
                        <p>在售商品{$shop['productCount']}件</p>
                    </div>
                </div>
            </div>
            <div class="aui-address-cell-ft">
                <span>进店看看</span>
            </div>
        </a>
    </div>
    <div class="aui-dri"></div>
    <div class="aui-product-pages">
        <div class="aui-product-pages-title">
            <h2>图文详情</h2>
        </div>
        <div class="aui-product-pages-img">
            <div>
                {$product.info}
            </div>
        </div>
    </div>

</div>
<footer class="aui-footer-product">
    <div class="aui-footer-product-fixed">
        <div class="aui-footer-product-concern-cart">
            <a href="{:url('index/index/index')}" >
                <span class="aui-f-p-icon"><img src="__STATIC__/themes/img/icon/icon-dp.png" alt=""></span>
                <span class="aui-f-p-focus-info">首页</span>
            </a>
            <a href="tel:{$shop['info']['phone']}" >
                <span class="aui-f-p-icon"><img src="__STATIC__/themes/img/icon/icon-kf.png" alt=""></span>
                <span class="aui-f-p-focus-info">客服</span>
            </a>
            <a href="javascript:;" id="favors" >
                <span class="aui-f-p-icon" >
                    {if condition="$isLike"}
                     <img src="__STATIC__/themes/img/icon/icon-sc2.png" id="likeSpan"  onclick="productLike('{$product.id}','{$shop[\'info\'][\'id\']}','{$uid}')">
                    {else}
                    <img src="__STATIC__/themes/img/icon/icon-sc.png" id="likeSpan" onclick="productLike( '{$product.id}','{$shop[\'info\'][\'id\']}','{$uid}')">
                    {/if}
                </span>
                <span class="aui-f-p-focus-info">收藏</span>
            </a>

        </div>
        <div class="aui-footer-product-action-list">
            <input type="hidden" name="gg" value="{$guige[0]['id']}" id="hideGG">
            <a href="#" onclick="buyNow()" class="red-color">立即购买</a>
        </div>
    </div>
</footer>
<script>

    // function showphone(phone) {
    //     layer.open({
    //         content: '<a href="tel:' + phone + '">' + phone + '</a>'
    //         , btn: '请拨打商户联系电话 点此关闭'
    //     });
    // }

    function productLike(productId,shopId,uid) {
        $.post("/index/shop/addOrCancelLike", { productId: productId, shopId: shopId, uid: uid},
            function (res) {
                if(res == 1){
                    document.getElementById('likeSpan').src = "/static/themes/img/icon/icon-sc.png";
                }
                if(res == 2){
                    document.getElementById('likeSpan').src = "/static/themes/img/icon/icon-sc2.png";
                }
            });
    }


    function ggselect (price,id,k) {

        $("#ggs a").removeClass('ggactive');
        $("#ggs a").addClass('gg');
        $("#ggs a").eq(k).removeClass('gg');
        $("#ggs a").eq(k).addClass('ggactive');
        $("#showPrice").html( "<i>￥</i>"+price);
        $("#hideGG").val(id);

    }


    function buyNow() {
        var gid = $("#hideGG").val();
        var url = "{:url('index/shop/buy',['id'=>$product.id,'sid'=>$shop['info']['id']])}?gid="+gid;
        window.location.href = url;
    }


</script>
{/block}
